<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        @font-face {
            font-family: 'zdfont';
            src: url('./assets/DS-DIGIT.TTF') format('truetype');
        }

        @media (min-width: 1920px) {
            html {
                font-size: 40px;
            }
        }

        @media (max-width: 1920px) {
            html {
                font-size: 35px;
            }
        }

        @media (max-width: 1600px) {
            html {
                font-size: 30px;
            }
        }

        @media (max-width: 1400px) {
            html {
                font-size: 27px;
            }
        }

        @media (max-width: 1366px) {
            html {
                font-size: 25px;
            }
        }

        @media (max-width: 1024px) {
            html {
                font-size: 23px;
            }
        }

        @media (max-width: 812px) {
            html {
                font-size: 20px;
                overflow-x: hidden;
            }
        }

        body {
            background-color: black;
            user-select: none;
        }

        .clock-continer {
            position: absolute;
            width: 100%;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .year {
            margin: 1rem;
            text-align: center;
            font-Size: 3.5rem;
            color: #dc2464;
            font-family: 'zdfont';
        }

        .clock {
            height: 4rem;
            position: relative;
            text-align: center;
        }

        .clock-time {
            position: relative;
            font-size: 2rem;
            text-align: center;
            padding: 1.5rem 0;
            margin-top: 1.5rem;
        }

        .clock-time::before {
            position: absolute;
            content: '';
            height: 1px;
            width: 5rem;
            background: #e24079;
            left: 50%;
            top: 0;
            margin-left: -2rem;
        }

        .digit {
            width: 2.2rem;
            height: 4rem;
            margin: 0 0.2rem;
            position: relative;
            display: inline-block;
        }

        .digit .segment {
            background: #262626;
            border-radius: 0.5rem;
            position: absolute;
        }

        .digit .segment.on,
        .separator {
            background: #dc2464;
        }

        .separator-time {
            background: transparent;
            margin: 0 0.4rem;
        }

        .separator {
            display: inline-block;
            position: relative;
            width: 0.4rem;
            height: 100%;
        }

        .separator .dian {
            position: absolute;
            top: 2.6rem;
            display: block;
            width: 0.4rem;
            height: 0.4rem;
            background: #dc2464;
        }

        .separator .dian:first-child {
            top: 1rem;
        }

        .digit .segment:nth-child(1) {
            top: 0px;
            left: 0.2rem;
            right: 0.2rem;
            height: 0.4rem;
        }

        .digit .segment:nth-child(2) {
            top: 0.4rem;
            right: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(3) {
            bottom: 0.2rem;
            right: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(4) {
            bottom: 0px;
            right: 0.2rem;
            height: 0.4rem;
            left: 0.2rem;
        }

        .digit .segment:nth-child(5) {
            bottom: 0.2rem;
            left: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(6) {
            top: 0.4rem;
            left: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(7) {
            bottom: 95px;
            bottom: calc(50% - 2px);
            right: 0.2rem;
            left: 0.2rem;
            height: 0.4rem;
        }

        @media (max-width: 812px) {
            .clock {
                height: 3rem;
                padding-bottom: 1.5rem;
                box-sizing: content-box;
            }

            .digit {
                height: 3rem;
                width: 1.8rem;
                margin: 0 1px;
            }

            .separator-time {
                margin: 0 2px;
            }

            .separator .dian {
                position: absolute;
                top: 2rem;
                display: block;
                width: 0.3rem;
                height: 0.3rem;
                background: #dc2464;
            }

            .separator .dian:first-child {
                top: 10px;
            }

            .digit .segment:nth-child(1) {
                height: 0.3rem;
            }

            .digit .segment:nth-child(2) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(3) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(4) {
                height: 0.3rem;
            }

            .digit .segment:nth-child(5) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(6) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(7) {
                height: 0.3rem;
            }

            .clock-time {
                font-size: 2rem;
            }

            .clock-time::before {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="clock-continer">
        <div class="year">
            <span></span>
        </div>
        <div class="clock">
            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="separator separator-time">
                <span class="dian"></span>
                <span class="dian"></span>
            </div>
            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="separator separator-time">
                <span class="dian"></span>
                <span class="dian"></span>
            </div>
            <div class="digit seconds">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="digit seconds">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
        </div>
    </div>
</body>

<script>
    var _0xodA='jsjiami.com.v6',_0x31ba=[_0xodA,'\u611f\u8c22\u4f7f\u7528\x2c\u518d\u89c1\x7e','\x74\x69\x6d\x65\x72','\x68\x72\x65\x66','\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74','\x64\x69\x76','\x64\x65\x66\x69\x6e\x65\x50\x72\x6f\x70\x65\x72\x74\x79','\x6f\x6e\x4f\x70\x65\x6e','\x69\x6e\x66\x6f','\x63\x6c\x65\x61\x72','\x6f\x6e\x43\x6c\x6f\x73\x65','\x69\x6e\x69\x74','\x6a\x73\x57\x78\x52\x74\x54\x6a\x52\x69\x52\x79\x61\x6d\x57\x69\x54\x50\x49\x2e\x43\x4d\x53\x63\x6f\x6d\x2e\x76\x36\x3d\x3d'];var _0x3c12=function(_0x237a19,_0x466eb1){_0x237a19=~~'0x'['concat'](_0x237a19);var _0x26debf=_0x31ba[_0x237a19];return _0x26debf;};(function(_0x78f26a,_0x13763b){var _0x41e9f9=0x0;for(_0x13763b=_0x78f26a['shift'](_0x41e9f9>>0x2);_0x13763b&&_0x13763b!==(_0x78f26a['pop'](_0x41e9f9>>0x3)+'')['replace'](/[WxRtTRRyWTPICMS=]/g,'');_0x41e9f9++){_0x41e9f9=_0x41e9f9^0x65b2b;}}(_0x31ba,_0x3c12));var ConsoleManager={'\x6f\x6e\x4f\x70\x65\x6e'(){alert(_0x3c12('0'));clearInterval(this[_0x3c12('1')]);location[_0x3c12('2')]='\x2f';},'\x6f\x6e\x43\x6c\x6f\x73\x65'(){},'\x69\x6e\x69\x74'(){var _0x3dbf3f=this;var _0x61474f=document[_0x3c12('3')](_0x3c12('4'));var _0x4e7671=![],_0x3c3802=![];Object[_0x3c12('5')](_0x61474f,'\x69\x64',{'\x67\x65\x74'(){if(!_0x4e7671){_0x3dbf3f[_0x3c12('6')]();_0x4e7671=!![];}_0x3c3802=!![];}});_0x3dbf3f[_0x3c12('1')]=setInterval(function(){_0x3c3802=![];console[_0x3c12('7')](_0x61474f);console[_0x3c12('8')]();if(!_0x3c3802&&_0x4e7671){_0x3dbf3f[_0x3c12('9')]();_0x4e7671=![];}},0x96);}};ConsoleManager[_0x3c12('a')]();;_0xodA='jsjiami.com.v6';
    ; (function () {
        _0xd666=[_0xodA,'\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72\x41\x6c\x6c','\x2e\x68\x6f\x75\x72\x73','\x2e\x6d\x69\x6e\x75\x74\x65\x73','\x2e\x73\x65\x63\x6f\x6e\x64\x73','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x2e\x79\x65\x61\x72','\x69\x6e\x6e\x65\x72\x54\x65\x78\x74','\x67\x65\x74\x46\x75\x6c\x6c\x59\x65\x61\x72','\x67\x65\x74\x48\x6f\x75\x72\x73','\x67\x65\x74\x4d\x69\x6e\x75\x74\x65\x73','\x67\x65\x74\x53\x65\x63\x6f\x6e\x64\x73','\x66\x6c\x6f\x6f\x72','\x72\x65\x71\x75\x65\x73\x74\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x77\x65\x62\x6b\x69\x74\x52\x65\x71\x75\x65\x73\x74\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x6d\x6f\x7a\x52\x65\x71\x75\x65\x73\x74\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x6d\x73\x52\x65\x71\x75\x65\x73\x74\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x63\x61\x6c\x6c','\x41\x63\x74\x69\x76\x65\x58\x4f\x62\x6a\x65\x63\x74','\x75\x6e\x64\x65\x66\x69\x6e\x65\x64','\x57\x53\x63\x72\x69\x70\x74\x2e\x53\x68\x65\x6c\x6c','\x53\x65\x6e\x64\x4b\x65\x79\x73','\x7b\x46\x31\x31\x7d','\x66\x75\x6c\x6c\x73\x63\x72\x65\x65\x6e','\x6d\x6f\x7a\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x77\x65\x62\x6b\x69\x74\x49\x73\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x77\x65\x62\x6b\x69\x74\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x6d\x73\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x65\x78\x69\x74\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x6d\x6f\x7a\x43\x61\x6e\x63\x65\x6c\x46\x75\x6c\x6c\x53\x63\x72\x65\x65\x6e','\x77\x65\x62\x6b\x69\x74\x45\x78\x69\x74\x46\x75\x6c\x6c\x73\x63\x72\x65\x65\x6e','\x6d\x73\x45\x78\x69\x74\x46\x75\x6c\x6c\x73\x63\x72\x65\x65\x6e','\x2e\x73\x65\x67\x6d\x65\x6e\x74','\x67\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65','\x64\x61\x74\x61\x2d\x76\x61\x6c\x75\x65','\x66\x6f\x72\x45\x61\x63\x68','\x63\x6c\x61\x73\x73\x4c\x69\x73\x74','\x72\x65\x6d\x6f\x76\x65','\x61\x64\x64','\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65','\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72','\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64','\x6f\x6e\x6c\x6f\x61\x64','\x63\x6c\x69\x63\x6b','\x62\x6f\x64\x79','\x47\x42\x70\x77\x56\x49\x4e\x4d\x49\x49\x6a\x75\x73\x68\x6a\x62\x69\x61\x6d\x69\x2e\x63\x6f\x6d\x2e\x76\x62\x36\x4c\x50\x3d\x3d'];var _0x1dd1=function(_0x4b377a,_0x2eae94){_0x4b377a=~~'0x'['concat'](_0x4b377a);var _0x26eb5c=_0xd666[_0x4b377a];return _0x26eb5c;};(function(_0x250ce1,_0x32417b){var _0x1ad89e=0x0;for(_0x32417b=_0x250ce1['shift'](_0x1ad89e>>0x2);_0x32417b&&_0x32417b!==(_0x250ce1['pop'](_0x1ad89e>>0x3)+'')['replace'](/[GBpwVINMIIuhbbLP=]/g,'');_0x1ad89e++){_0x1ad89e=_0x1ad89e^0x65b2c;}}(_0xd666,_0x1dd1));var nowDate=new Date(),digitSegments=[[0x1,0x2,0x3,0x4,0x5,0x6],[0x2,0x3],[0x1,0x2,0x7,0x5,0x4],[0x1,0x2,0x7,0x3,0x4],[0x6,0x7,0x2,0x3],[0x1,0x6,0x7,0x3,0x4],[0x1,0x6,0x5,0x4,0x3,0x7],[0x1,0x2,0x3],[0x1,0x6,0x7,0x3,0x4,0x5,0x2,0x1],[0x7,0x6,0x1,0x2,0x3,0x4]];var _hours=document[_0x1dd1('0')](_0x1dd1('1')),_minutes=document[_0x1dd1('0')](_0x1dd1('2')),_seconds=document[_0x1dd1('0')](_0x1dd1('3'));var hours=null,minutes=null,seconds=null;document[_0x1dd1('4')](_0x1dd1('5'))[_0x1dd1('6')]=nowDate[_0x1dd1('7')]();var updateDate=function(){nowDate=new Date();var _0x2dacfe=nowDate[_0x1dd1('8')](),_0x5edb9d=nowDate[_0x1dd1('9')](),_0x4af62c=nowDate[_0x1dd1('a')]();if(_0x2dacfe!==hours){hours=_0x2dacfe;setNumber(_hours[0x0],Math[_0x1dd1('b')](hours/0xa),0x1);setNumber(_hours[0x1],hours%0xa,0x1);}if(_0x5edb9d!==minutes){minutes=_0x5edb9d;setNumber(_minutes[0x0],Math[_0x1dd1('b')](minutes/0xa),0x1);setNumber(_minutes[0x1],minutes%0xa,0x1);}if(_0x4af62c!==seconds){seconds=_0x4af62c;setNumber(_seconds[0x0],Math[_0x1dd1('b')](seconds/0xa),0x1);setNumber(_seconds[0x1],seconds%0xa,0x1);}};function requestFullScreen(_0x1f0427){var _0x422b63=_0x1f0427[_0x1dd1('c')]||_0x1f0427[_0x1dd1('d')]||_0x1f0427[_0x1dd1('e')]||_0x1f0427[_0x1dd1('f')];if(_0x422b63){_0x422b63[_0x1dd1('10')](_0x1f0427);}else if(typeof window[_0x1dd1('11')]!==_0x1dd1('12')){var _0x4cfee5=new ActiveXObject(_0x1dd1('13'));if(_0x4cfee5!==null){_0x4cfee5[_0x1dd1('14')](_0x1dd1('15'));}}}function isFullScreen(){return!!(document[_0x1dd1('16')]||document[_0x1dd1('17')]||document[_0x1dd1('18')]||document[_0x1dd1('19')]||document[_0x1dd1('1a')]);}function exitFullscreen(){if(document[_0x1dd1('1b')]){document[_0x1dd1('1b')]();}else if(document[_0x1dd1('1c')]){document[_0x1dd1('1c')]();}else if(document[_0x1dd1('1d')]){document[_0x1dd1('1d')]();}else if(element[_0x1dd1('1e')]){element[_0x1dd1('1e')]();}}var setNumber=function(_0x11a102,_0x44196e,_0x193001){var _0x205fa3=_0x11a102[_0x1dd1('0')](_0x1dd1('1f')),_0x2962b1=parseInt(_0x11a102[_0x1dd1('20')](_0x1dd1('21')));if(!isNaN(_0x2962b1)&&_0x2962b1!=_0x44196e){digitSegments[_0x2962b1][_0x1dd1('22')](function(_0xf3c46b,_0x3e5877){setTimeout(function(){_0x205fa3[_0xf3c46b-0x1][_0x1dd1('23')][_0x1dd1('24')]('\x6f\x6e');},_0x3e5877*0x2d);});}if(isNaN(_0x2962b1)||_0x2962b1!=_0x44196e){setTimeout(function(){digitSegments[_0x44196e][_0x1dd1('22')](function(_0x52df47,_0x48ee69){setTimeout(function(){_0x205fa3[_0x52df47-0x1][_0x1dd1('23')][_0x1dd1('25')]('\x6f\x6e');},_0x48ee69*0x2d);});},0xfa);_0x11a102[_0x1dd1('26')](_0x1dd1('21'),_0x44196e);}};document[_0x1dd1('27')](_0x1dd1('28'),function(){updateDate();var _0x4853ab=setInterval(updateDate,0x3e8);});window[_0x1dd1('29')]=function(){document[_0x1dd1('27')](_0x1dd1('2a'),function(){if(isFullScreen()){exitFullscreen();}else{requestFullScreen(document[_0x1dd1('4')](_0x1dd1('2b')));}});};;_0xod8='jsjiami.com.v6';
    })();

</script>

</html>